import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
  CSS2DRenderer,
  CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";

let camera, scene, renderer, labelRenderer;
let plane;
let pointer,
  raycaster,
  isShiftDown = false;

let materialNormal = new THREE.MeshBasicMaterial({
	color: 0x8edafe
});

let materialWarning = new THREE.MeshBasicMaterial({
	color: 0xFCFF8E
});

let materialAlert = new THREE.MeshBasicMaterial({
	color: 0xFf0000
});

let rollOverMesh;

const objects = [];

groundSize = 1000;

init();
render();

function addGridHelper() {
	const gridHelper = new THREE.GridHelper(groundSize, 40);
  scene.add(gridHelper);
}

function createBuilds() {
  let builds = [
    {
		name: '涂装车间',
      left: 25,
      top: 25,
      width: 100,
      height: 500,
	  level: 2
    },
	{
		name: '酸洗车间',
      left: 25,
      top: 600,
      width: 100,
      height: 200,
	  level: 3
	},
	{
		name: '废水处理区',
      left: 25,
      top: 850,
      width: 100,
      height: 100,
	},
	{
		name: '镏焊车间（一）',
      left: 150,
      top: 25,
      width: 500,
      height: 100,
	},
	{
		name: '镏焊车间（二）',
      left: 150,
      top: 180,
      width: 500,
      height: 100,
	},
	{
		name: '综合车间',
      left: 150,
      top: 340,
      width: 500,
      height: 100,
	},
	{
		name: '管道车间（一）',
      left: 150,
      top: 500,
      width: 500,
      height: 100,
	},
	{
		name: '管道车间（二）',
      left: 150,
      top: 660,
      width: 500,
      height: 100,
	},
	{
		name: '仓库',
      left: 150,
      top: 820,
      width: 500,
      height: 150,
	},
	{
		name: '办公区',
      left: 700,
      top: 25,
      width: 250,
      height: 450,
	},
	{
		name: '焊工培训区',
      left: 700,
      top: 525,
      width: 250,
      height: 450,
	},
  ];

  builds.forEach((b) => {
    // roll-over helpers

    let buildHeight = 25;

    const buildBlock = new THREE.BoxGeometry(b.width, buildHeight, b.height);

	if (b.level === 3) {
		rollOverMesh = new THREE.Mesh(buildBlock, materialAlert);
	} else if (b.level === 2) {
		rollOverMesh = new THREE.Mesh(buildBlock, materialWarning);
	} else {
		rollOverMesh = new THREE.Mesh(buildBlock, materialNormal);
	}
    
    rollOverMesh.position.set(
      -groundSize / 2 + b.left + b.width / 2,
      buildHeight / 2,
      -groundSize / 2 + b.top + b.height / 2
    );
    scene.add(rollOverMesh);

	

	const earthDiv = document.createElement( 'div' );
	
	earthDiv.innerHTML = '<div class=label>'+b.name+'</div>';
	earthDiv.style.backgroundColor = 'transparent';

    const earthLabel = new CSS2DObject(earthDiv);
    earthLabel.position.set(0, 0, 0);
    earthLabel.center.set(0, 0);
    rollOverMesh.add(earthLabel);
    
  });
}

function init() {
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  camera.position.set(0, 1000, 1200);
  camera.lookAt(0, 0, 0);

  scene = new THREE.Scene();
  let backgroundColor = 0xf0f0f0;
  // let backgroundColor = 0x000000;
  scene.background = new THREE.Color(backgroundColor);

  createBuilds();

  // grid

  // addGridHelper();

  const geometry = new THREE.PlaneGeometry(groundSize + 100, groundSize + 100);
  geometry.rotateX(-Math.PI / 2);

  plane = new THREE.Mesh(
    geometry,
    new THREE.MeshBasicMaterial({ visible: true })
  );
  scene.add(plane);

  objects.push(plane);

  // lights

  const ambientLight = new THREE.AmbientLight(0x606060, 3);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
  directionalLight.position.set(1, 0.75, 0.5).normalize();
  scene.add(directionalLight);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  labelRenderer = new CSS2DRenderer();
  labelRenderer.setSize(window.innerWidth, window.innerHeight);
  labelRenderer.domElement.style.position = "absolute";
  labelRenderer.domElement.style.top = "0px";
  document.body.appendChild(labelRenderer.domElement);

  // controls
  const controls = new OrbitControls(camera, labelRenderer.domElement);
  controls.addEventListener("change", render);
  controls.enablePan = false;

  

  //

  window.addEventListener("resize", onWindowResize);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
  labelRenderer.setSize( window.innerWidth, window.innerHeight );

  render();
}

function render() {
  renderer.render(scene, camera);
  labelRenderer.render( scene, camera );
  
}
